<template>
  <div class="employee">
    <van-nav-bar
        title="员工信息"
        left-text="返回"
        left-arrow
        @click-left="onClickLeft"
    >
    <template #right>
        <van-dropdown-menu class="dropdown" active-color="#1989fa">
        <van-dropdown-item v-model="value" :options="option1" />
        </van-dropdown-menu>
    </template>
    </van-nav-bar>
    <van-search v-model="search" placeholder="请输入员工姓名或电话" @search="onSearch"/>
    <!-- 列表 -->
    <div class="main-box" ref="mainBox">
        <div class="demo-preview flex-around box-style" v-for="item,index in dataList" :key="index">
            <img :src="'http://cnnn.bsmkj.cn'+item.ewmimage">
            <div class="demo-content">
                <h3>{{ item.employee }}<span :class="['status',item.status == '1' ? 'green' : 'red' ]">（{{statusEnum(Number(item.status))}}）</span></h3>
                <p>联系电话：{{item.phone}}</p>
                <p>商家名称：{{item.name}}</p>
            </div>
        </div>
        <div class="title" v-if="(dataList.length < total) && (loading == true)">加载中,请稍后...</div>
        <div class="title" v-if="dataList.length == total">没有数据啦</div>
    </div>
  </div>
</template>

<script>
import Enums from "@/utils/enums.js";
export default {
  data () {
    return {
        option1:[],
        value:0,
        search: '',
        dataList:[{
            employee:'张三',
            phone:'15263564565',
            name:'红旗超市',
            ewmimage: "/qrcode/freight/lanes/merchantId=8}.png?v=1698890739",
            status:'1'
        },{
            employee:'李四',
            phone:'15263564565',
            name:'红旗超市',
            ewmimage: "/qrcode/freight/lanes/merchantId=8}.png?v=1698890739",
            status:'2'
        }],
        page: 1, // 当前页数
        total:2,
        limit:5,
        loading:false
    }
  },
  created(){
    this.option1 = Enums.stutasEnum1.list
  },
  mounted(){
    this.$refs.mainBox.addEventListener('scroll',this.scroll,true)
  },
  methods:{
    onClickLeft() {
        this.$router.back()
    },
    // 搜索
    onSearch(){
        this.$toast(this.search);
    },
    scroll() {
      const scrollTop = this.$refs.mainBox.scrollTop
      const windowHeight = this.$refs.mainBox.clientHeight
      const scrollHeight = this.$refs.mainBox.scrollHeight
      if (scrollTop + windowHeight >= scrollHeight ) {
          if(this.dataList.length >= this.total){
              this.loading = false
              console.log('没有数据啦')
          }else{
              this.loading = true
              this.page += 1
              console.log(this.page,'加载中')
              // 调用请求
          }
      }
    },
  },
}
</script>
<style scoped lang="scss">
.employee{
    width: 100%;
    height: 100vh;
    background-color: #f8f8f8;
}
.main-box{
    width: 100%;
    height: calc(100% - 100px);
    overflow-y: auto;
}
.demo-preview{
    width: 95%;
    height: 100px;
    // background-color: pink;
    margin: 10px auto 0 auto;
    padding: 10px;
    img{
        width: 80px;
        height: 80px;
    }
    p{
        margin: 5px 0;
        text-align: left;
    }
    h3{
        margin: 6px 0;
        text-align: left;
    }
    .demo-content{
        width: calc(100% - 95px);
    }
}
.title{
    width: 100%;
    text-align: center;
    margin-top: 20px;
}
.green{
    color: #2cb996;
    font-size: 13px;
}
.red{
    color: #f7aa62;
    font-size: 13px;
}
</style>
<style>
.dropdown{
  width: 70px;
}
.dropdown .van-dropdown-menu__bar{
  background-color: transparent !important;
  box-shadow: none !important;
}
.dropdown .van-ellipsis{
  font-size: 14px;
}
</style>